
<template>
  <div class="text-white h-screen flex flex-col overflow-hidden relative m-0 p-0">
    <!-- 背景层：深色渐变 + 网格 + 极光 + 扫描线 -->
    <div class="absolute inset-0 bg-deep"></div>
    <div class="absolute inset-0 bg-stars"></div>
    <div class="absolute inset-0 bg-grid opacity-20"></div>
    <div class="absolute inset-0 bg-aurora"></div>
    <div class="absolute inset-0 scanlines pointer-events-none"></div>
    <div class="absolute inset-0 bg-particles"></div>
    <!-- 主容器：玻璃质感 + 霓虹边框 -->
    <div class="m-3 rounded-lg overflow-hidden relative neo-surface neo-border neo-glow">
      <!-- 内容容器 -->
      <div class="p-4 h-full flex flex-col">
        <!-- 头部 -->
        <div class="flex items-center mb-4 relative">
          <!-- 左侧占位，保证标题真正居中 -->
          <div class="w-1/3"></div>
          <div class="w-1/3 text-center relative">
            <h1 class="text-2xl font-bold title-neo inline-block relative">维修工单看板
              <span class="title-line"><i class="capsule"></i></span>
            </h1>
          </div>
          <div class="w-1/3 flex justify-end">
            <span class="text-auto text-gray-200 px-3 py-1 bg-white/5 border border-white/10 rounded-md backdrop-blur-md whitespace-nowrap">{{ currentDate }}</span>
          </div>
          <!-- 顶角装饰：绝对定位，不改变布局 -->
          <div class="corner-bracket corner-bracket--tl"><i class="square"></i></div>
          <div class="corner-bracket corner-bracket--tr"><i class="square"></i></div>
        </div>

        <!-- 主体布局 -->
        <div class="flex flex-row gap-4 h-full">
          <div class="w-2/3 flex flex-col space-y-4 h-full">
            <!-- 工单状态卡片组件 -->
            <div class="h-1/7 p-4 neo-card neo-border relative">
              <TicketStatus/>
            </div>

            <!-- 图表区域组件 -->
            <div class="h-3/7 p-4 flex flex-row space-x-2 relative neo-card neo-border">
              <div class="w-1/3 relative neo-card neo-border p-2">
                <FaultTypeCount />
              </div>
              <div class="w-2/3 relative neo-card neo-border p-2">
                <TicketTrend/>
              </div>
            </div>

            <!-- 工单表格组件 -->
            <div class="h-3/7 p-4 relative neo-card neo-border">
              <TicketsTable/>
            </div>
          </div>

          <div class="w-1/3 flex flex-col space-y-4 h-full">
            <!-- 完成率组件 -->
            <div class="h-4/7 p-4 relative neo-card neo-border">
              <CompletionRate/>
            </div>

            <!-- 故障排名组件 -->
            <div class="h-3/7 p-4 relative neo-card neo-border">
              <FaultRanking/>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 外围装饰流动光条 -->
    <div class="pointer-events-none absolute inset-x-6 top-2 h-[2px] overflow-hidden">
      <div class="w-1/2 h-full bg-gradient-to-r from-transparent via-blue-400/70 to-transparent animate-border-flow-horizontal"></div>
    </div>
    <div class="pointer-events-none absolute inset-x-6 bottom-2 h-[2px] overflow-hidden">
      <div class="w-1/2 h-full bg-gradient-to-r from-transparent via-cyan-400/70 to-transparent animate-border-flow-horizontal"></div>
    </div>
    <div class="pointer-events-none absolute inset-y-6 left-2 w-[2px] overflow-hidden">
      <div class="h-1/2 w-full bg-gradient-to-b from-transparent via-blue-400/70 to-transparent animate-border-flow-vertical"></div>
    </div>
    <div class="pointer-events-none absolute inset-y-6 right-2 w-[2px] overflow-hidden">
      <div class="h-1/2 w-full bg-gradient-to-b from-transparent via-cyan-400/70 to-transparent animate-border-flow-vertical"></div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue'
import TicketStatus from "../components/TicketStatus.vue"
import FaultTypeCount from '../components/FaultTypeCount.vue'
import TicketTrend from '../components/TicketTrend.vue'
import TicketsTable from '../components/TicketsTable.vue'
import CompletionRate from '../components/CompletionRate.vue'
import FaultRanking from '../components/FaultRanking.vue'

// 实时时间
const currentDate = ref('')

const updateCurrentTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  const weekdays = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
  const weekday = weekdays[now.getDay()]
  currentDate.value = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekday}`
}

onMounted(() => {
  updateCurrentTime()
  const interval = setInterval(updateCurrentTime, 1000)
  onUnmounted(() => clearInterval(interval))
})
</script>

<style scoped>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 水平光条动画（顶部和底部） */
@keyframes borderFlowHorizontal {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

/* 垂直光条动画（左侧和右侧） */
@keyframes borderFlowVertical {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(400%);
  }
}

/* 脉冲动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.8);
  }
}

/* 动画类名区分 */
.animate-border-flow-horizontal {
  animation: borderFlowHorizontal 8s linear infinite;
}

.animate-border-flow-vertical {
  animation: borderFlowVertical 8s linear infinite;
}

.animate-pulse {
  animation: pulse 3s ease-in-out infinite;
}

.animation-delay-500 {
  animation-delay: 0.5s;
}

.animation-delay-1000 {
  animation-delay: 1s;
}

.animation-delay-1500 {
  animation-delay: 1.5s;
}
</style>

